<template>
    <div class="home">
  <header class="bgc all">
    <ul>
      <li><img src="../assets/home_img/bgc.png" alt=""></li>
      <li><img src="../assets/home_img/WORKTOGETHER.png" alt="" class="work-together"></li>
      <li class="learn"><a href="#">Learn Now</a></li>
    </ul>
  </header>

  <!-- 猜你喜欢 -->
  <section class="all section">
    <span class="line"></span>
    <div class="like_bd">
      <div class="like_bd_left">
        <ol class="list">
          <li><a href="#">1. 头条1</a></li>
          <li><a href="#">2. 头条2</a></li>
          <li><a href="#">3. 头条3</a></li>
          <li><a href="#">3. 头条4</a></li>
          <li><a href="#">3. 头条5</a></li>
          <li><a href="#">3. 头条6</a></li>
          <li><a href="#">3. 头条7</a></li>
          <li><a href="#">3. 头条8</a></li>
          <li><a href="#">3. 头条9</a></li>
          <li><a href="#">3. 头条1</a></li>
        </ol>
      </div>
      <div class="like_bd_right">
        <div class="like_section">
          <ul>
            <li><div>
              <img src="../assets/home_img/01.png" alt="">
            </div>
              <a>问答</a>
            </li>
            <li><img src="../assets/home_img/02.png" alt="">
              <a>原创</a>
            </li>
            <li><img src="../assets/home_img/03.png" alt="">
              <a>圈子</a>
            </li>
            <li><img src="../assets/home_img/04.png" alt="">
              <a>超话</a>
            </li>
            <li><img src="../assets/home_img/05.png" alt="">
              <a>娱乐</a>
            </li>
            <li><img src="../assets/home_img/06.png" alt="">
              <a>休闲</a>
            </li>
            <li><img src="../assets/home_img/07.png" alt="">
              <a>工具</a>
            </li>
            <li><img src="../assets/home_img/08.png" alt="">
              <a>其他</a>
            </li>
          </ul>
        </div>
        <div class="like_pic">
          <ul>
            <li><img src="../assets/home_img/p1.png" alt=""></li>
            <li><img src="../assets/home_img/p2.png" alt=""></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="like_footer">
      <p>猜你喜欢</p>
      <ul class="like_footer_dot">
        <li></li>
        <li class="selected"></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </section>
  <section class="all pictures">
    <div class="pic_left">
      <ul>
        <li><img src="../assets/home_img/pic_left01.png" alt=""></li>
        <li><img src="../assets/home_img/pic_left02.png" alt=""></li>
      </ul>

    </div>
    <div class="pic_right">
      <ul>
        <li><img src="../assets/home_img/pic_right.png" alt=""></li>
      </ul>
    </div>
  </section>
    </div>
</template>

<script>
export default {
    name:"home",
    data(){
        return {

        }
    },
    methods:{

    },
    components:{

    }
}
</script>


<style scoped>
@import url("../utils/bootstrap/css/bootstrap.min.css");
.all {
    width: 1366px;
    margin: 0 auto;
}
.home{
  margin-bottom: 133px;
}
a {
    text-decoration: none !important;
}
li {
    list-style: none;
}
.disabled {
    pointer-events: none;
    cursor: default;
}
#charcater {
    position: relative;
}
#character a:first-child {
    display: block;
    position: absolute;
    font-size: 36px;
    color: #ffffff;
    font-family: 'AdobeHeitiStd-Regular';
    left: 93px;
    top: 5px;
}
#character a:last-child {
    display: block;
    position: absolute;
    font-size: 18px;
    color: #ffffff;
    font-family: 'MVBoli';
    font-style: italic;
    left: 79px;
    top: 55px;
}
.bgc {
    position: relative;
    display: block;
    height: 474px;
    overflow: hidden;
}
.bgc img{
    position: relative;
    top: -126px;
    z-index: -1;
}
.bgc::before {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 1366px;
    height: 100%;
    background: rgba(0, 0, 0, .45)  no-repeat ;
}
.bgc .work-together {
    position: absolute;
    top: 153px;
    left: 448px;
	width: 526px;
	height: 42px;
    z-index: 10;
}
.learn {
    position: absolute;
	width: 167px;
	height: 65px;
    line-height: 65px;
    top: 259px;
    left: 50%;
    font-size: 24px;
    
    text-align: center;
    transform: translateX(-50%);
    font-family: 'AdobeHeitiStd';
	border: solid 1px #ffffff;
}
.learn a {
    color: #ffffff;
    text-decoration: none;
}
/* section */
.section {
    margin-top: 58px;
    width: 1146px;
    height: 659px;
    padding-top: 9px;
}
.line {
    display: block;
    height: 0;
    margin: 0 auto;
    width: 108px;
    border-top: 1px solid #727171;
    margin-bottom: 57px;
}
.like_bd {
    height: 512px;
}
.like_bd_left .list {
    width: 326px;
    height: 506px;
    padding-top:184px;
    padding-left: 24px;
    background:url(../assets/home_img/list.png) no-repeat;
}
.like_bd_left .list li {
    height: 30px;
}
.like_bd_left .list li a{
    text-decoration: none;
    font-family: 'Microsoft YaHei UI';
    font-size: 14px;
    color: #ffffff;
}
.like_bd div{
    float: left;
}
.like_bd_right {
    margin-left: 53px;
    width: 767px;
    height: 506px;
}
.like_section ul{
    display: grid;
    grid-template-columns: repeat(4,146px);
    grid-template-rows: repeat(2,194px);
    grid-column-gap: 60px;
}
.like_section ul li {
    cursor: pointer;
    text-align: center;
    overflow: hidden;
    transition: 500ms;
    border-radius: 4px;
}
.like_section ul li:hover{
    transform:scale(1.2);
}
.like_section ul li a{
    cursor: pointer;
    font-family: 'AdobeHeitiStd';
    font-size: 18px;
    text-align: center;
    line-height: 38px;
    color: #3c3b3b;
}
.like_section ul li img{
    transform: translateX(-25%);
    height: 148px;
}
.like_section ul li:first-child img{
    transform: translateX(0);
    height: 148px;
}
.like_pic ul li {
    margin-top: 10px;
    float: left;
    height: 107px;
    overflow: hidden;
}
.like_pic ul li:first-child img {
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-83%);
    width: 100%;
}
.like_pic ul li:last-child img {
    position: relative;
    top: -16%;
    width: 100%;
}
.like_pic ul li:first-child {
    margin-right: 41px;
    width: 509px;
}
.like_pic ul li:last-child {
    width: 217px;
    height: 107px;
}
.like_footer {
    /* position: relative; */
    width: 180px;
    height: 86px;
    font-size: 20px;
    font-weight: 700;
    line-height: 86px;
    text-align: center;
    margin: 0 auto;
    /* text-align: center; */
}
.like_footer p{
    margin-bottom: 0;
    height: 67px;
    line-height: 80px;
    text-align: center;
}
.like_footer .like_footer_dot {
    width: 180px;
    height: 13px;
    border-radius: 5px;
    padding-left: 27px;
}

.like_footer_dot li {
    float: left;
    margin: 2px 7px;
    /* line-height: 8px; */
    list-style: none;
    height: 10px;
    width: 10px;
    background-color: #333333;
    border-radius: 5px;
}

.like_footer_dot .selected {
    background-color: #3c948b;
    width: 37px;
}
/* pictures */
.pictures {
    margin-top: 41px;
    height: 545px;
    width: 1146px;
}
.pictures div {
    float: left;
}
.pictures div:last-child {
    float: right;
}
.pic_left ul li {
    width: 414px;
    height: 256px;
    overflow: hidden;
}
.pic_left ul li:last-child {
    margin-top: 34px;
}
.pic_left ul li img:last-child {
    width: 100%;
    height: 100%;
}
.pic_right ul li img {
    width: 100%;
    height: 545px;
}
</style>
